<template>
	<view class="swiperPanel" @touchstart="startMove" @touchend="endMove">
		<view class="swiperItem" v-for="(item, index) in swiperList" :key="index" :style="{
			transform: itemStyle[index].transform, 
			zIndex: itemStyle[index].zIndex, 
			opacity: itemStyle[index].opacity
			}">
			<view class="children">
				<image class="pic" :src="item.image"></image>
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		ref,
		onMounted,
		defineProps
	} from 'vue'
	// 定义props
	const props = defineProps({
		swiperList: {
			type: Array,
			default: () => []
		}
	})
	const emit = defineEmits(['currentChange']);
	// 响应式数据
	const slideNote = ref({
		x: 0,
		y: 0
	})
	const screenWidth = ref(0)
	const itemStyle = ref([])
	const currentIndex = ref(0) // 添加当前选中图片索引
	// 生命周期钩子
	onMounted(() => {
		try {
			const macInfo = uni.getSystemInfoSync();
			screenWidth.value = macInfo.screenWidth;
			// 计算初始样式
			props.swiperList.forEach((_, index) => {
				itemStyle.value.push(getStyle(index))
			})
		} catch (e) {
			console.error('获取系统信息失败:', e)
		}
	})
	// 计算样式的方法
	const getStyle = (e) => {
		if (props.swiperList.length === 0) return {
			transform: 'scale(1)',
			zIndex: 1,
			opacity: 1
		}

		// 设置统一的缩放比例
		const scale = 0.6;
		const spacing = 50;
		// 计算与当前选中图片的差值
		const diff = Math.abs(e - currentIndex.value);

		if (e > props.swiperList.length / 2) {
			const right = props.swiperList.length - e
			console.log(props.swiperList.length, '=', e, '=', right, 'IF');
			return {
				transform: `scale(${scale}) translate(-${right * spacing}%,0px)`,
				zIndex: 9999 - right,
				opacity: right > 1 ? 0 / right : 1
			}
		} else {
			console.log(props.swiperList.length, '=', e, 'ELSE');
			// 对于第一张图片（中心图片）保持原始大小，其他都缩小
			return {
				transform: `scale(${e === 0 ? 1 : scale}) translate(${e * spacing}%,0px)`,
				zIndex: 9999 - e,
				opacity: e > 1 ? 0 / e : 1
			}
		}
	}
	// 触摸开始事件
	const startMove = (e) => {
		slideNote.value.x = e.changedTouches?.[0]?.pageX || 0
		slideNote.value.y = e.changedTouches?.[0]?.pageY || 0
	}
	// 触摸结束事件
	const endMove = (e) => {
		if (props.swiperList.length <= 1) return // 只有一张图时不滑动

		let newList = JSON.parse(JSON.stringify(itemStyle.value))
		const diffX = e.changedTouches?.[0]?.pageX - slideNote.value.x || 0

		if (diffX < 0) {
			// 向左滑动
			const last = [newList.pop()]
			newList = last.concat(newList)
			currentIndex.value = (currentIndex.value + 1) % props.swiperList.length
		} else if (diffX > 0) {
			// 向右滑动
			newList.push(newList[0])
			newList.splice(0, 1)
			currentIndex.value = (currentIndex.value - 1 + props.swiperList.length) % props.swiperList.length
		}

		itemStyle.value = newList

		console.log(currentIndex.value, '当前第几张');
		emit('currentChange', currentIndex.value)
	}
	// 如果需要在父组件中获取当前选中的索引，可以暴露这个方法
	// defineExpose({
	// 	getCurrentIndex: () => currentIndex.value
	// })
</script>

<style lang="scss">
	.swiperPanel {
		margin: 20rpx 0;
		height: 405rpx;
		width: 100%;
		overflow: hidden;
		position: relative;

		//
		.swiperItem {
			height: 100%;
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			transition: all .8s ease;

			.children {
				height: 403rpx;
				width: 405rpx;
				margin: 2rpx auto;

				.pic {
					height: 100%;
					width: 100%;
					object-fit: cover;
				}
			}
		}
	}
</style>